<template>
  <div id="question" class="question">
    <div class="question-title">
      <h2><i></i><span>提问区</span></h2>
    </div>
    <div class="question-main live-left question-answer-list-wrap">
      <ul id="question-answer" class="l-b-m-list"></ul>
    </div>
    <div class="question-user">
      <div class="llb-t">
        <div class="face"></div>
        <div class="o-t" id="only-me" @click="sendControl">
          <i :class="{ active: selected }"></i>
          只看我的提问
        </div>
      </div>
      <div class="llb-b">
        <input class="chat-send-content" id="sendQaMsg" type="text" />
        <span class="btn-chat" id="qaSendBtn" @click="sendMsg">发送</span>
      </div>
    </div>
  </div>
</template>

<script>
const HDScene = window.liveHDScene
import LiveInfo from '@views/live/cc/common/liveinfo'
import UIQuestion from './UIQuestion'
import UIAnswer from './UIAnswer'
import Render from '@views/live/cc/common/render'
export default {
  data() {
    return {
      render: new Render(),
      isCanSend: true,
      timeOutId: -1,
      name: 'qa',
      qaMap: {},
      selected: false
    }
  },
  methods: {
    bindEvent() {
      HDScene.onQAPulish({ callback: this.addQuestionPublish.bind(this) })
      HDScene.onQAQuestion({ callback: this.addQuestion.bind(this) })
      HDScene.onQAAnswer({ callback: this.addAnswer.bind(this) })
    },

    addQuestionPublish() {
      let qid = LiveInfo.qaPulishInfo
      if (qid && qid.length > 0) {
        for (let i = 0; i < qid.length; i++) {
          var questionId = qid[i].questionId
          let currentObject = this.qaMap[questionId]
          if (currentObject) {
            currentObject.visible = true
          }
        }
      }
    },
    sendControl() {
      if (!this.selected) {
        for (let str in this.qaMap) {
          let uiquestion = this.qaMap[str]
          if (!uiquestion.self) {
            uiquestion.visible = false
          }
        }
        this.$message.info('只看我的问答')
      } else {
        for (let str in this.qaMap) {
          let uiquestion = this.qaMap[str]
          if (uiquestion.isPublish) {
            uiquestion.visible = true
          }
        }
        this.$message.info('查看所有问答')
      }
      this.setSelfActive(this.selected)
      this.selected = !this.selected
    },
    // 发送
    sendMsg() {
      let sendMsg = this.render.getNode('sendQaMsg').value
      if (!HDScene.isLive) {
        this.$message.warning('直播未开始，无法提问')
        return false
      }
      if (!sendMsg) {
        this.$message.warning('提问信息不能为空')
        return false
      }
      if (!this.isCanSend) {
        this.$message.warning('提问过于频繁，请稍后')
        return false
      }
      if (sendMsg.length > 300) {
        this.$message.warning('问题不能超过300个字符')
        return false
      }
      //发送问答
      HDScene.sendQuestionMsg({ msg: sendMsg })
      this.render.getNode('sendQaMsg').value = ''
      this.isCanSend = false
      this.timeOutId = setTimeout(() => {
        this.isCanSend = true
        clearTimeout(this.timeOutId)
      }, 10000)
    },

    addQuestion() {
      let qInfo = LiveInfo.questionInfo
      if (qInfo != {}) {
        let uiquestion = new UIQuestion()
        uiquestion.setInfo(qInfo)
        this.qaMap[qInfo.questionId] = uiquestion
        if (!qInfo.isPublish && !qInfo.self) {
          uiquestion.visible = false
        }
      }
      this.updateScroll()
    },

    addAnswer() {
      let aInfo = LiveInfo.answerInfo
      if (!aInfo || aInfo != {}) {
        var qustion = this.qaMap[aInfo.questionId]
        if (aInfo.isPrivate == '1') {
          if (aInfo.self) {
            let uianswer = new UIAnswer()
            uianswer.setInfo(aInfo)
          }
          return
        }
        let uianswer = new UIAnswer()
        uianswer.setInfo(aInfo)
        qustion.visible = true
        qustion.isPublish = true
      }
      this.updateScroll()
    },

    updateScroll() {
      let container = this.render.getNode('question-answer')
      let h = container.offsetHeight
      let scrollBody = this.render.getNodeByClass('question-answer-list-wrap')
      scrollBody.scrollTo(0, h)
    },

    setSelfActive(v) {
      let node = this.render.getNodeByClass('send-question-only-self')
      if (!v) {
        this.render.addClass(node, 'active')
      } else {
        this.render.removeClass(node, 'active')
      }
    }
  },
  mounted() {
    this.updateScroll()
    this.bindEvent()
  }
}
</script>

<style lang="scss">
@import './questionAnswer.scss';
</style>
